<script setup>

import {ref} from "vue";

let isOpen = ref(false) // 控制是否显示模态框
let isTeleport = ref(false) // 控制是否启用 Teleport 组件
</script>

<template>
  <button v-on:click="isOpen=!isOpen">{{ isOpen ? '关闭' : '打开' }}</button>
  <button v-on:click="isTeleport=!isTeleport">{{ isTeleport ? '禁用' : '启用' }}穿越功能</button>


  <hr>

  <Teleport to="body" v-bind:disabled="isTeleport">
    <!--<div>我在哪？我是谁？</div>-->
    <div v-if="isOpen" class="modal">
      <p>元素被穿梭到Body，与#app的div元素属并列关系</p>
      <!-- 按钮点击控制模态框的隐藏显示 -->
      <button class="close" type="button" @click="isOpen = false">
        关闭
      </button>
    </div>
  </Teleport>
<h1>我具有穿越时空的能力</h1>

</template>

<style scoped>

</style>